<!-- 
  @name: 添加优惠券
  @date: 2020.3.12
 -->
<template>
	<view class="content">
		<!-- 输入区域 -->
		<view class="topview">
			<view class="item">
				<view class="left">优惠券名称</view>
				<input class="int" placeholder="输入优惠券名称" placeholder-class="phcolor" v-model.trim="couponName" />
			</view>
			<view class="item">
				<view class="left">面值（元）</view>
				<input type="digit" class="int" placeholder="输入面值" placeholder-class="phcolor" v-model.trim="couponAmount" />
			</view>
			<view class="item">
				<view class="left">使用门槛</view>
				<input type="digit" class="int" placeholder="客户加注满XX元可用" placeholder-class="phcolor" v-model.trim="couponOrderAmount" />
			</view>
			<view class="item">
				<view class="left">开始时间</view>
				<view class="right">
					<picker class="note" mode="date" :value="beginTime" @change="begChange">
						<view>{{beginTime}}</view>
					</picker>
					<view class="arrow_nav"></view>
				</view>
			</view>
			<view class="item bn">
				<view class="left">结束时间</view>
				<view class="right">
					<picker class="note" mode="date" :value="endTime" @change="endChange">
						<view>{{endTime}}</view>
					</picker>
					<view class="arrow_nav"></view>
				</view>
			</view>
		</view>
		
		<!-- 领取方式 -->
		<view class="gain-way">
			<view class="title">领取方式</view>
			<view class="way">
				<radio-group @change="changeType">
					<view class="line">
						<view class="note">加注消费成功后领取</view>
						<radio color="#407CFF" value="1" :checked="drawType === 1" />
					</view>
					<view class="input" v-if="drawType === 1">
						<text>用户最低加注</text>
						<view class="ace">
							<input type="digit" class="int" v-model.trim="minimumFill" />
						</view>
						<text>元</text>
					</view>
					<view class="line t2">
						<view class="note">无需消费即可领取</view>
						<radio color="#407CFF" value="0" :checked="drawType === 0" />
					</view>
				</radio-group>
			</view>
		</view>
		
		<!-- 发行总量 -->
		<view class="faxing">
			<view class="item">
				<view class="tip">发行总量(张)</view>
				<input type="number" placeholder="输入发行总量" placeholder-class="phcolor"
					v-model.trim="dispatchNum" :disabled="isDraw" @tap="faxingTip" />
			</view>
		</view>
		
		<!-- 每人限领 -->
		<view class="xianling num_int">
			<view class="tip">每人限领</view>
			<view class="_btn les" @tap="count(1)"></view>
			<view class="_num">
				<input type="number" v-model.number="couponLimit" :disabled="isDraw" />
			</view>
			<view class="_btn add" @tap="count(2)"></view>
		</view>
		
		<!-- 可用加注站 -->
		<view class="can-list">
			<view class="title" @tap="$navigateTo('/pages/common/siteList')">
				<text class="left">选择可用加注站</text>
				<view class="arrow_nav"></view>
			</view>
			<view class="site_list">
				<view class="_btn" v-for="(it, ix) in siteList" :key="it.siteId">
					{{it.siteName}}
					<image class="icon-close2" src="/static/images/icon-close2.png" mode="aspectFill" @tap="removeItem(ix)"></image>
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub" @tap="submit">确认发布</view>
		
		<!-- 发布成功弹窗 -->
		<view class="_popup center" v-if="showPopup">
			<view class="info">
				<view class="tip">发布成功</view>
				<view class="note">可在设置-优惠券中查看</view>
				<button class="btn" @tap="sucback">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,  //发布后弹窗
				siteList: [],  //加注站集合
				isDraw: true,  //是否能填写领取数量
				//信息
				couponName: '',
				couponAmount: '',
				beginTime: '请选择开始日期',
				endTime: '请选择结束日期',
				couponOrderAmount: '',
				dispatchNum: 0,
				couponLimit: 0,
				applyArea: '',
				drawType: 1,
				minimumFill: ''
			}
		},
		onLoad() {
			uni.$on('common_chooseSite', this.chooseSite);
		},
		onUnload() {
			uni.$off('common_chooseSite', this.chooseSite);
		},
		methods: {
			// 删除已选站点
			removeItem(index) {
				this.siteList.splice(index,1);
			},
			//监听选择加注站
			chooseSite(e) {
				this.siteList = [];
				this.siteList = this.siteList.concat(e);
			},
			//更改领取方式
			changeType(e) {
				this.drawType = parseInt(e.detail.value);
				if(this.drawType === 1) {
					this.isDraw = true;
					this.couponLimit = 0;
					this.dispatchNum = 0;
				} else {
					this.isDraw = false;
					this.couponLimit = 1;
					this.dispatchNum = '';
				}
			},
			//更改时间
			begChange(e) {
				this.beginTime = e.target.value;
			},
			endChange(e) {
				this.endTime = e.target.value;
			},
			//添加发行量提示
			faxingTip() {
				if(this.drawType === 1) {
					this.$showToast('加注领取的优惠券，此属性不可更改，0代表无限领取。');
					return;
				}
			},
			//增加减少领取数
			count(n) {
				if(this.drawType === 1) {
					this.$showToast('加注领取的优惠券，此属性不可更改，0代表无限领取。');
					return;
				} else {
					if(n === 1) {
						if(this.couponLimit > 1) this.couponLimit -= 1;
					} else {
						this.couponLimit += 1;
					}
				}
			},
			//完成后返回上一页
			sucback() {
				uni.navigateBack({
					delta: 1
				});
			},
			//提交
			submit() {
				if(!this.couponName) {
					this.$showToast('请输入券名称！');
					return;
				}
				if(!this.couponAmount) {
					this.$showToast('请输入面值！');
					return;
				}
				if(this.couponOrderAmount === '') {
					this.$showToast('请输入使用门槛！');
					return;
				}
				if(this.beginTime.indexOf('-') < 0) {
					this.$showToast('请选择开始日期！');
					return;
				}
				if(this.endTime.indexOf('-') < 0) {
					this.$showToast('请选择结束日期！');
					return;
				}
				if(!this.dispatchNum && this.drawType === 0) {
					this.$showToast('请输入正确的发行总量！');
					return;
				}
				if(!this.couponLimit  && this.drawType === 0) {
					this.$showToast('请输入每人限领张数！');
					return;
				}
				if(!this.minimumFill && this.drawType === 1) {
					this.$showToast('请输入用户最低加注金额！');
					return;
				}
				if(this.siteList.length === 0) {
					this.$showToast('请选择可用加注站！');
					return;
				} else {
					let arr = [];
					this.siteList.forEach(item => {
						arr.push(item.siteId);
					});
					this.applyArea = this.$arrToStr(arr);
				}
				
				this.submit2();
			},
			submit2() {
				this.$http({
					url: this.$api.couponUrl + 'addcoupon',
					data: {
						couponName: this.couponName,
						couponAmount: parseFloat(this.couponAmount),
						beginTime: this.beginTime,
						endTime: this.endTime,
						couponOrderAmount: parseFloat(this.couponOrderAmount),
						dispatchNum: parseInt(this.dispatchNum),
						couponLimit: parseInt(this.couponLimit),
						applyArea: this.applyArea,
						drawType: this.drawType,
						minimumFill: this.drawType === 1 ? parseFloat(this.minimumFill) : ''
					}
				}).then(res => {
					this.showPopup = true;
				});
			}
		}
	}
</script>

<style lang="scss">
	$width-left: 260rpx;
	
	/* 输入区域 */
	.topview {
		width: 750rpx;
		padding-left: 40rpx;
		background-color: $color-white;
		.item.bn {
			border-bottom: none;
		}
		.item {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				width: $width-left;
			}
			.int,
			.right {
				flex: 1;
				margin-right: 40rpx;
			}
			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				.note {
					flex: 1;
				}
			}
		}
	}
	
	/* 领取方式 */
	.gain-way {
		width: 750rpx;
		padding: 55rpx 40rpx;
		margin-top: $spacing-col;
		display: flex;
		flex-direction: row;
		background-color: $color-white;
		.title {
			width: $width-left;
			font-size: 32rpx;
		}
		.way {
			flex: 1;
			margin-top: 5rpx;
			.line {
				display: flex;
				flex-direction: row;
				align-items: center;
				.note {
					flex: 1;
				}
			}
			.line.t2 {
				margin-top: 40rpx;
			}
			.input {
				width: 100%;
				margin-top: 27rpx;
				padding-top: 25rpx;
				font-size: 24rpx;
				color: $color-primary;
				border-top: 1rpx solid $color-list;
				display: flex;
				flex-direction: row;
				align-items: center;
				.ace {
					width: 140rpx;
					height: 54rpx;
					margin: 0 20rpx;
					text-align: center;
					border-radius: 6rpx;
					background-color: #F4F4F4;
					.int {
						margin-top: 8rpx;
						font-size: 36rpx;
						text-align: center;
					}
				}
			}
		}
	}
	
	/* 发行总量 */
	.faxing {
		width: 750rpx;
		padding-left: 40rpx;
		background-color: $color-white;
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 40rpx 0;
			border-top: 1rpx solid $color-list;
			border-bottom: 1rpx solid $color-list;
			.tip {
				width: $width-left;
				font-size: 32rpx;
			}
		}
	}
	
	/* 每人限领 */
	.xianling {
		padding: 50rpx 40rpx;
		background-color: $color-white;
		.tip {
			width: $width-left;
			font-size: 32rpx;
		}
	}
	
	/* 按钮 */
	.btn_pub {
		margin-top: 40rpx;
	}
	
	/* 可用加注站 */
	.can-list {
		width: 750rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		.title {
			width: 100%;
			margin-top: 50rpx;
			padding: 0 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				flex: 1;
			}
		}
	}
	
	/* 发布成功弹窗 */
	._popup .info {
		width: 510rpx;
		height: 450rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15p5X6Aaj8AAACCsKMYGn8799.png');
		.tip {
			width: 100%;
			margin-top: 174rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.note {
			width: 100%;
			margin-top: 40rpx;
			text-align: center;
			color: $color-grey-dark;
		}
		.btn {
			width: 400rpx;
			height: 80rpx;
			margin-top: 40rpx;
			margin-left: 55rpx;
			color: $color-white;
			background-color: $color-primary;
		}
	}
	
</style>
